<script setup>
import {ref, onMounted, watch} from "vue";
import * as echarts from "echarts/core";
import {GridComponent} from "echarts/components";
import {RadarChart} from "echarts/charts";
import {CanvasRenderer} from "echarts/renderers";

echarts.use([GridComponent, RadarChart, CanvasRenderer]);

const option = ref({
  title: {},
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  radar: {
    indicator: [
      {name: "思想困难", max: 100},
      {name: `学业困难`, max: 100},
      {name: "经济困难", max: 100},
      {name: "学习能力", max: 100},
      {name: "创新能力", max: 100},
    ],
    axisLabel: {
      overflow: "breakAll"
    }
  },
  series: [
    {
      type: "radar",
      data: [
        {
          value: [],
        },
      ],
    },
  ],
})

const props = defineProps({
  option: {
    type: Object,
    default: (() => {
    })
  }
})
watch(() => props.option, (val) => {
  if (val) {
    option.value.series[0].data[0].value = val.data.map(item => item.value)
    const maxNumber = Math.max(...val.data.map(item => item.value))
    option.value.radar.indicator = val.data.map(item => {
      return {name: item.name, max: maxNumber}
    })
  }
}, {immediate: true})
</script>

<template>
  <v-chart :option="option" class="chart"></v-chart>
</template>

<style scoped>

</style>